<template>
  <view class="washerBomWrapper">
    <view class="photoView">
      <open-data
        type="userAvatarUrl"
        :default-avatar="netconfig.ASSETS_IMGURL + 'img_Avatar.png'"
        class="photoBox"
        v-if="!getProfile"
      ></open-data>
      <image v-else class="photoBox" :src="nickImg"></image>
      <view class="textBox">{{ nickName }}</view>
    </view>
    <view class="phoneView">
      <view class="phoneText"> {{ $t('DeleteAccount.Cell-phoneNumber.Text') }} </view>
      <view class="textBox">
        {{ $t(cellPhone) }}
      </view>
    </view>
    <view class="delBtn" @click="delentBut"> {{ $t('GetUserProfile.AccountCancellation.Text') }} </view>
  </view>
  <!-- 删除弹窗 -->
  <Modal
    :title="$t('GetUserProfile.DeleteCancellation.Text')"
    :visible="deletPop"
    :cancel-text="$t('APP.Common.Delete.Text')"
    :ok-text="$t('APP.Common.Cancel.Text')"
    @ok="confirmDeletPop"
    @cancel="cancelDeletPop"
  >
    <view class="updateView"> {{ $t('DeleteAccount.DeleteTipsDes.Text') }} </view>
  </Modal>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'
import aesHelper from '@/utils/aesHelper'
import { useAuthStore } from '@/store/auth'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { delentAccount } from '@/api/account'
import netconfig from '@/config/netconfig'
const authStore = useAuthStore()
const i18n = useI18n()

const getProfile = ref(false)
const nickName = ref('')
const nickImg = ref('')
const cellPhone = ref('')
const deletPop = ref(false)

onLoad((options) => {
  getPhone()
  getProfile.value = options?.getProfile
  nickName.value = options?.nickName
  nickImg.value = options?.nickImg
})

function getPhone() {
  cellPhone.value = aesHelper.decrypt(wx.getStorageSync('ciamId'), authStore.key, authStore.iv)
}
function delentBut() {
  deletPop.value = true
}
/**
 * 取消删除账号
 */
function cancelDeletPop() {
  deletPop.value = false
}

/**
 * 确认删除账号
 */
async function confirmDeletPop() {
  deletPop.value = false
  uni.showLoading({
    title: i18n.t('APP.Common.Loading.Text'),
    mask: true,
  })
  try {
    await delentAccount()
    authStore.removeAllUserInfo()
    uni.showToast({
      title: i18n.t('APP.Common.DeleteSucess.Text'),
    })
    uni.navigateTo({
      url: '/pages/navigator/index/index?current=3',
    })
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: i18n.t('APP.Common.DeleteFail.Text'),
    })
  }
}
</script>
<style lang="less">
.washerBomWrapper {
  width: 100vw;
  height: 100vh;
  background: #f4f4f4;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  font-family: PingFangSC-Regular;
  font-size: 32rpx;
  color: #131b35;
  letter-spacing: -0.78rpx;
  font-weight: 400;
  .top {
    position: absolute;
    top: 0;
    width: 100%;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
  }

  .photoView {
    overflow: hidden;
    padding: 40rpx 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
  }

  .photoBox {
    width: 144rpx;
    height: 144rpx;
    box-sizing: border-box;
    border-radius: 80rpx;
    overflow: hidden;
    box-shadow: 0 0 16rpx 0 rgba(19, 27, 53, 0.2);
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 38rpx;
  }

  .photoBox::after {
    border: none;
  }

  .textBox {
    padding-left: 20rpx;
  }

  .phoneView {
    margin-top: 40rpx;
    padding: 0 40rpx;
    background: #fff;
    display: flex;
    align-items: center;
    height: 96rpx;
    line-height: 96rpx;
  }

  .phoneText {
    width: 144rpx;
  }

  .delBtn {
    width: 100%;
    height: 96rpx;
    background-color: #fff;
    margin-top: 120rpx;
    text-align: center;
    line-height: 100rpx;
    font-family: PingFangSC-Medium;
    font-size: 32rpx;
    color: #3d56a1;
    font-weight: 500;
  }

  .updateView {
    font-family: PingFangSC-Regular;
    font-size: 32rpx;
    color: #131b35;
    text-align: center;
    line-height: 50rpx;
    font-weight: 400;
    padding: 0 40rpx 60rpx;
  }

  .favSingle {
    margin-bottom: 40rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 88rpx;
    line-height: 88rpx;
    box-sizing: border-box;
  }

  .commonInput {
    width: 95%;
    text-align: left;
  }

  .nameBox {
    border-bottom: 1px solid blue;
  }

  button {
    border: none;
    outline: none;
    background: #fff;
  }

  button::after {
    border: none;
  }

  .delBox {
    width: 100vw;
    height: 100vh;
    position: absolute;
    text-align: center;
  }

  .delView {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 83%;
  }
}
</style>
